{%- stylesheet -%}
  .block_slogan {
    text-align: center;
  }
  .block_slogan .swiper {
    overflow: hidden;
  }
  @media screen and (min-width: 768px) {
    .block_slogan .swiper-wrapper {
      gap: 30px;
    }
    .block_slogan .solgan-flex-item {
      flex: 1;
    }
  }
  @media screen and (max-width: 767px) {
    .block_slogan .swiper-wrapper.no_swiper {
      flex-wrap: wrap;
      gap: 30px;
    }
    .block_slogan .swiper-wrapper.no_swiper .solgan-flex-item {
      width: 100%;
    }
  }
  .block_slogan .solgan-flex-item .img_box svg,
  .block_slogan .solgan-flex-item .img_box img {
    width: 48px;
    height: 48px;
  }
  .block_slogan .solgan-flex-item .img_box img {
    object-fit: cover;
  }
  .block_slogan .solgan-flex-item .solgan-flex-item-title {
    margin-top: 40px;
    font-size: var(--product_font_size);
    color: var(--title_color);
  }
  .block_slogan .solgan-flex-item .solgan-flex-item-des {
    margin-top: 20px;
    line-height: 20px;
    color: var(--detail_color);
  }
  .block_slogan .swiper-pagination {
    position: relative;
    margin-top: 40px;
  }
  .block_slogan .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #000;
  }
{%- endstylesheet -%}

{% assign data = section.settings %}
{% assign blockId = block_id | default: section.block_id %}
<div class="block_slogan">
  <div class="container_wrapper">
    {% include 'block_title', title: data.title, detail: data.detail %}
    <div class="swiper" id="swiper-{{blockId}}">
      <ul class="swiper-wrapper {% if data.mobile_swiper == false %}no_swiper{% endif %}">
        {% for block in section.blocks %}
          <li class="swiper-slide solgan-flex-item">
            <div class="img_box">
              {% if block.image.src != '' %}
                {% include 'lazy_img', src: block.image.src, alt: block.image.alt %}
              {% else %}
                {% include 'icon_slogan', slogan: block.icon %}
              {% endif %}
            </div>
            <div class="text_box">
              {% if block.title != '' %}
                <div class="solgan-flex-item-title">{{ block.title }}</div>
              {% endif %}
              {% if block.content != '' %}
                <div class="solgan-flex-item-des">{{ block.content }}</div>
              {% endif %}
            </div>
          </li>
        {% endfor %}
      </ul>
      {% if section.blocks.size > 1 and data.mobile_swiper == true %}
        <div class="swiper-pagination" id="swiper-pagination-{{blockId}}"></div>
      {% endif %}
    </div>
  </div>
</div>

<script>
$(function() {
	{% if section.blocks.size > 1 and data.mobile_swiper == true %}
		let option = {}
		if(moi.isMobile()) {
			option.pagination = {
				el: `#swiper-pagination-{{blockId}}`,
				clickable: true
			}
		}
		let swiper = new Swiper(`#swiper-{{blockId}}`, {
			slidesPerView: 1,
			autoHeight: true, 
			spaceBetween: 30,
			...option
		})
		$(`#swiper-{{blockId}} .swiper-slide`).each(function () {
			const element = this;
			const resizeObserver = new ResizeObserver((entries) => {
			  for (const entry of entries) {
				swiper.update();
			  }
			});
			resizeObserver.observe(element);
		});
	{% endif %}
})
</script>

{% schema %}
{
  "tag": "",
  "class": "block_slogan",
  "is_global": false,
  "name": {
    "zh_CN": "slogan",
    "en_US": "Slogan"
  },
  "max_blocks": "5",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "slogan",
        "en_US": "Slogan"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "id": "title",
      "default": "Why Choose Us"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "Short description"
      },
      "id": "detail",
      "default": ""
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "移动端轮播",
        "en_US": "Mobile Slider"
      },
      "default": false,
      "id": "mobile_swiper"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "内容",
        "en_US": "Content"
      }
    }
  ],
  "blocks": [
    {
      "name": {
        "zh_CN": "slogan",
        "en_US": "Slogan"
      },
      "type": "slogan-item",
      "settings": [
        {
          "type": "card_select",
          "label": {
            "zh_CN": "选择图片",
            "en_US": "Select image"
          },
          "id": "icon",
          "option": [
            {
              "label": {
                "zh_CN": "物流",
                "en_US": "Logistics"
              },
              "value": "oemsaas-wuliu",
              "icon": "shopyyicon-wuliu"
            },
            {
              "label": {
                "zh_CN": "货币",
                "en_US": "Money"
              },
              "value": "oemsaas-huobi",
              "icon": "shopyyicon-huobi"
            },
            {
              "label": {
                "zh_CN": "认证",
                "en_US": "Authentication"
              },
              "value": "oemsaas-renzheng",
              "icon": "shopyyicon-renzheng"
            },
            {
              "label": {
                "zh_CN": "全球交付",
                "en_US": "Global delivery"
              },
              "value": "oemsaas-quanqiujiaofu",
              "icon": "shopyyicon-quanqiujiaofu"
            },
            {
              "label": {
                "zh_CN": "买家保护",
                "en_US": "Buyer protection"
              },
              "value": "oemsaas-maijiabaohu",
              "icon": "shopyyicon-maijiabaohu"
            },
            {
              "label": {
                "zh_CN": "手机",
                "en_US": "Cell phone"
              },
              "value": "oemsaas-iphone",
              "icon": "shopyyicon-shouji"
            },
            {
              "label": {
                "zh_CN": "聊天",
                "en_US": "Chat"
              },
              "value": "oemsaas-liaotian",
              "icon": "shopyyicon-liaotian"
            },
            {
              "label": {
                "zh_CN": "信用卡",
                "en_US": "Credit card"
              },
              "value": "oemsaas-xinyongka",
              "icon": "shopyyicon-xinyongka"
            },
            {
              "label": {
                "zh_CN": "邮箱",
                "en_US": "Mailbox"
              },
              "value": "oemsaas-youxiang",
              "icon": "shopyyicon-youxiang"
            },
            {
              "label": {
                "zh_CN": "定位",
                "en_US": "Positioning"
              },
              "value": "oemsaas-dingwei",
              "icon": "shopyyicon-dingwei"
            },
            {
              "label": {
                "zh_CN": "问题",
                "en_US": "Problem"
              },
              "value": "oemsaas-wenti",
              "icon": "shopyyicon-wenti"
            },
            {
              "label": {
                "zh_CN": "笑脸",
                "en_US": "Smiley face"
              },
              "value": "oemsaas-xiaolian",
              "icon": "shopyyicon-xiaolian"
            },
            {
              "label": {
                "zh_CN": "店铺/房子",
                "en_US": "Shop/house"
              },
              "value": "oemsaas-dianpufangzi",
              "icon": "shopyyicon-a-dianpufangzi"
            },
            {
              "label": {
                "zh_CN": "礼物",
                "en_US": "The gift,"
              },
              "value": "oemsaas-liwu",
              "icon": "shopyyicon-liwu"
            },
            {
              "label": {
                "zh_CN": "爱心",
                "en_US": "Love"
              },
              "value": "oemsaas-aixin",
              "icon": "shopyyicon-aixin"
            },
            {
              "label": {
                "zh_CN": "折扣",
                "en_US": "Discount"
              },
              "value": "oemsaas-zhekou",
              "icon": "shopyyicon-zhekou"
            },
            {
              "label": {
                "zh_CN": "安全锁",
                "en_US": "Safety lock"
              },
              "value": "oemsaas-anquansuo",
              "icon": "shopyyicon-anquansuo"
            },
            {
              "label": {
                "zh_CN": "转换",
                "en_US": "Transform"
              },
              "value": "oemsaas-zhuanhuan",
              "icon": "shopyyicon-zhuanhuan"
            },
            {
              "label": {
                "zh_CN": "购物车",
                "en_US": "Shopping cart"
              },
              "value": "oemsaas-gouwuche",
              "icon": "shopyyicon-gouwuche"
            },
            {
              "label": {
                "zh_CN": "24h",
                "en_US": "24h"
              },
              "value": "oemsaas-a-24h",
              "icon": "shopyyicon-a-24h"
            },
            {
              "label": {
                "zh_CN": "商品",
                "en_US": "Product"
              },
              "value": "oemsaas-shangpin",
              "icon": "shopyyicon-shangpin"
            },
            {
              "label": {
                "zh_CN": "优惠券",
                "en_US": "Coupons"
              },
              "value": "oemsaas-youhuiquan",
              "icon": "shopyyicon-youhuiquan"
            },
            {
              "label": {
                "zh_CN": "客户群",
                "en_US": "Customer base"
              },
              "value": "oemsaas-kehuqun",
              "icon": "shopyyicon-kehuqun"
            },
            {
              "label": {
                "zh_CN": "编辑",
                "en_US": "Edit"
              },
              "value": "oemsaas-bainji",
              "icon": "shopyyicon-bianji"
            },
            {
              "label": {
                "zh_CN": "会员",
                "en_US": "Member"
              },
              "value": "oemsaas-huiyuan",
              "icon": "shopyyicon-huiyuan"
            },
            {
              "label": {
                "zh_CN": "航运",
                "en_US": "Shipping"
              },
              "value": "oemsaas-hangyun",
              "icon": "shopyyicon-hangyun"
            },
            {
              "label": {
                "zh_CN": "建筑",
                "en_US": "Architecture"
              },
              "value": "oemsaas-jianzhu",
              "icon": "shopyyicon-jianzhu"
            },
            {
              "label": {
                "zh_CN": "赞美",
                "en_US": "Praise"
              },
              "value": "oemsaas-zanmei",
              "icon": "shopyyicon-zanmei"
            },
            {
              "label": {
                "zh_CN": "视频",
                "en_US": "Video"
              },
              "value": "oemsaas-shipin",
              "icon": "shopyyicon-shipin"
            },
            {
              "label": {
                "zh_CN": "个性定制",
                "en_US": "Customization"
              },
              "value": "oemsaas-gexingdingzhi",
              "icon": "shopyyicon-gexingdingzhi"
            },
            {
              "label": {
                "zh_CN": "增长",
                "en_US": "Growth"
              },
              "value": "oemsaas-zengzhang",
              "icon": "shopyyicon-zengzhang"
            },
            {
              "label": {
                "zh_CN": "资料",
                "en_US": "Data"
              },
              "value": "oemsaas-ziliao",
              "icon": "shopyyicon-ziliao"
            },
            {
              "label": {
                "zh_CN": "学生",
                "en_US": "Student"
              },
              "value": "oemsaas-xuesheng",
              "icon": "shopyyicon-xuesheng"
            },
            {
              "label": {
                "zh_CN": "办公",
                "en_US": "Office"
              },
              "value": "oemsaas-bangong",
              "icon": "shopyyicon-bangong"
            },
            {
              "label": {
                "zh_CN": "模块",
                "en_US": "Module"
              },
              "value": "oemsaas-mokuai",
              "icon": "shopyyicon-mokuai"
            },
            {
              "label": {
                "zh_CN": "文件包",
                "en_US": "File package"
              },
              "value": "oemsaas-wenjianbao",
              "icon": "shopyyicon-wenjianbao"
            },
            {
              "label": {
                "zh_CN": "文件",
                "en_US": "File"
              },
              "value": "oemsaas-wenjian",
              "icon": "shopyyicon-wenjian"
            },
            {
              "label": {
                "zh_CN": "条约",
                "en_US": "The Treaty"
              },
              "value": "oemsaas-tiaoyue",
              "icon": "shopyyicon-tiaoyue"
            },
            {
              "label": {
                "zh_CN": "商务",
                "en_US": "Business"
              },
              "value": "oemsaas-shangwu",
              "icon": "shopyyicon-shangwu"
            },
            {
              "label": {
                "zh_CN": "分享",
                "en_US": "Share"
              },
              "value": "oemsaas-a-fenxiangfabu",
              "icon": "shopyyicon-a-fenxiangfabu"
            }
          ],
          "default": "oemsaas-wuliu"
        },
        {
          "type": "card_image",
          "label": {
            "zh_CN": "选择图片",
            "en_US": "Select image"
          },
          "info": {
            "zh_CN": "尺寸建议48*48px",
            "en_US": "Size suggested 48*48px"
          },
          "id": "image",
          "default": {
            "src": "",
            "alt": ""
          }
        },
        {
          "type": "card_input",
          "label": {
            "zh_CN": "标题",
            "en_US": "Title"
          },
          "id": "title",
          "default": "Worldwide Delivery"
        },
        {
          "type": "card_text_editor",
          "label": {
            "zh_CN": "内容",
            "en_US": "Content"
          },
          "id": "content",
          "default": "Fast Shipping to over 200+ countries, Package Location Tracking Online."
        }
      ]
    }
  ],
  "default": {
    "settings": {
      "title": "Why Choose Us",
      "detail": "",
      "mobile_swiper": false
    },
    "blocks": [
      {
        "icon": "oemsaas-wuliu",
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "Worldwide Delivery",
        "content": "Fast Shipping to over 200+ countries, Package Location Tracking Online.",
        "block_type": "slogan-item"
      },
      {
        "icon": "oemsaas-xinyongka",
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "Safe Payment",
        "content": "Secure Payment VIA Paypal, Don't keep any cards information.",
        "block_type": "slogan-item"
      },
      {
        "icon": "oemsaas-renzheng",
        "image": {
          "src": "",
          "alt": ""
        },
        "title": "Buyer Protection",
        "content": "7-day Satisfaction Guarantee, Full Refund if dont receive orders.",
        "block_type": "slogan-item"
      }
    ]
  },
  "icon": "icon-slogan"
}
{% endschema %}
